import { renderIndexHead, renderIndexBody } from './index/index.js'
import { renderCheckboxHead, renderCheckboxBody } from './checkbox/index.js'
import { renderCommonHead, renderCommonBody } from './common/index.js'
import { renderRadioHead, renderRadioBody } from './radio/index.js'
import { renderButtonHead, renderButtonBody } from './button/index.js'
import { renderSelectHead, renderSelectBody } from './select/index.js'
import { renderSearchSelectHead, renderSearchSelectBody } from './select/search.js'
import { renderDateHead, renderDateBody } from './date/index.js'

class easytable {
    //构造方法
    constructor(id, option) {
        this.version = '1.0.1';
        //渲染容器id
        this.id = id;
        //初始化属性
        this.setOption(option);
        //渲染表格
        this.render();
    }
    //设置属性
    setOption(option) {
        this.option = option;
        // this.tableElem = document.getElementById(this.id);
        // this.option = option;
        this.cols = option.cols;
        this.data = option.data ? option.data : [];//表格数据默认值为空数组
        this.fieldArray = getFieldArray(option);
    }
    //渲染
    render() {
        this.divElem = document.getElementById(this.id);
        //清空表格
        clear(this.divElem);
        //渲染表格
        this.tableElem = document.createElement('table');
        this.divElem.appendChild(this.tableElem);
        //渲染表格样式
        this.divElem.className = 'et';
        this.tableElem.width = this.option.width ? this.option.width : '100%';
        //渲染普通列
        //渲染表头
        renderHead(this.tableElem, this.cols);
        //渲染表格
        renderBody(this.tableElem, this.cols, this.data, this);
        //索引列
    }
    //获取选中数据
    getSelectedData() {
        let tbodyElem = this.tableElem.getElementsByTagName('tbody')[0];
        //所有的input框都是单选框和多选框
        let elemArray = tbodyElem.getElementsByTagName('input');
        let selectedData = [];
        for (let i = 0; i < elemArray.length; i++) {
            if (elemArray[i].checked) {
                selectedData.push(this.data[i]);
            }
        }
        return selectedData;
    }
    //获取选中行号
    getSelectedIndex() {
        let tbodyElem = this.tableElem.getElementsByTagName('tbody')[0];
        //所有的input框都是单选框和多选框
        let elemArray = tbodyElem.getElementsByTagName('input');
        let selectedIndex = [];
        for (let i = 0; i < elemArray.length; i++) {
            if (elemArray[i].checked) {
                selectedIndex.push(i);
            }
        }
        return selectedIndex;
    }
    //增加行
    appendRaw(rawData) {
        if (!rawData) {
            rawData = {};
            for (let col of this.cols) {
                if (col.field) {
                    rawData[col.field] = '';
                }
            }
        }
        this.data.push(rawData);
        this.render();
    }
    //删除行
    deleteRaw(rawIndex) {
        this.data.splice(rawIndex, 1);
        this.render();
    }
    //删除多行
    deleteRaws(indexArr) {
        for (let i = 0; i < indexArr.length; i++) {
            this.deleteRaw(indexArr[i] - i);
        }
    }
}



//清空表格
function clear(elem) {
    let nodes = elem.childNodes;
    for (let i = nodes.length - 1; i >= 0; i--) {
        elem.removeChild(nodes[i]);
    }
}

function getFieldArray(option) {
    let fieldArray = [];
    for (let col of option.cols) {
        fieldArray.push(col.field);
    }
    return fieldArray;
}

function renderHead(tableElem, cols) {
    let theadElem = document.createElement('thead');
    tableElem.appendChild(theadElem);
    let trElem = document.createElement('tr');
    theadElem.appendChild(trElem);
    for (let col of cols) {
        let thElem = document.createElement('th');
        renderHeadStyle(thElem, col);
        trElem.appendChild(thElem);
        switch (col.type) {
            case 'common':
                renderCommonHead(thElem, col);
                break;
            case 'index':
                renderIndexHead(thElem, col);
                break;
            case 'checkbox':
                renderCheckboxHead(thElem, col);
                break;
            case 'radio':
                renderRadioHead(thElem, col);
                break;
            case 'button':
                renderButtonHead(thElem, col);
                break;
            case 'select':
                renderSelectHead(thElem, col);
                break;
            case 'searchSelect':
                renderSearchSelectHead(thElem, col);
                break;
            case 'date':
                renderDateHead(thElem, col);
                break;
            case 'datetime-local':
                renderDateHead(thElem, col);
                break;
            default:
                renderCommonHead(thElem, col);
                break;
        }
    }

}

function renderBody(tableElem, cols, data, tabelObj) {
    let tbodyElem = document.createElement('tbody');
    tableElem.appendChild(tbodyElem);
    if (Array.isArray(data) && data.length != 0) {  //表格数据为数组，且有数据
        for (let i = 0; i < data.length; i++) {
            let rawData = data[i];
            let trElem = document.createElement('tr');
            tbodyElem.appendChild(trElem);
            for (let col of cols) {
                let tdElem = document.createElement('td');
                renderBodyStyle(tdElem, col);
                trElem.appendChild(tdElem);
                switch (col.type) {
                    case 'common':
                        renderCommonBody(tdElem, col, rawData);
                        break;
                    case 'index':
                        renderIndexBody(tdElem, i);
                        break;
                    case 'checkbox':
                        renderCheckboxBody(tdElem, col);
                        break;
                    case 'radio':
                        renderRadioBody(tdElem, col);
                        break;
                    case 'button':
                        renderButtonBody(tdElem, col, rawData, i, tabelObj);
                        break;
                    case 'select':
                        renderSelectBody(tdElem, col, rawData);
                        break;
                    case 'searchSelect':
                        renderSearchSelectBody(tdElem, col, rawData, i);
                        break;
                    case 'date':
                        renderDateBody(tdElem, col, rawData);
                        break;
                    case 'datetime-local':
                        renderDateBody(tdElem, col, rawData);
                        break;
                    default:
                        renderCommonBody(tdElem, col, rawData);
                        break;
                }
            }
        }
    } else {//表格无数据
        let trElem = document.createElement('tr');
        tbodyElem.appendChild(trElem);
        let tdElem = document.createElement('td');
        trElem.appendChild(tdElem);
        tdElem.innerHTML = "暂无数据";
        trElem.className = 'et-empty';
        tdElem.colSpan = cols.length;
    }
}

//渲染表头样式
function renderHeadStyle(thElem, col) {
    //样式设置
    if (!col.width) {//表格单元格宽度自适应
        // thElem.style.whiteSpace = 'nowrap';
    } else {//表格单元格固定宽度
        thElem.style.width = col.width;
    }
    //最小宽度是30px
    thElem.style.minWidth = col.minWidth;
    thElem.style.textAlign = col.halign;
}

//渲染表格样式
function renderBodyStyle(tdElem, col) {

    //样式设置
    if (!col.width) {//表格单元格宽度自适应
        // tdElem.style.whiteSpace = 'nowrap';
    } else {//表格单元格固定宽度
        tdElem.style.width = col.width;
    }

    //样式设置
    tdElem.style.width = col.width;
    tdElem.style.minWidth = col.minWidth;
    tdElem.style.textAlign = col.align;
}

export default easytable